<template>
  <div class="gantt-wrapper">
    <div class="selectTimes">
      <el-radio-group v-model="radio" size="small" @input="radioChange">
        <el-radio-button label="month">月</el-radio-button>
        <el-radio-button label="week">周</el-radio-button>
        <el-radio-button label="day">日</el-radio-button>
      </el-radio-group>
    </div>
    <div ref="gantt" class="gantt-container"></div>
  </div>
</template>

<script>
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import ganttData from "./mock/test.json";
export default {
  data() {
    return {
      radio: "month",
      task: {},
    };
  },
  mounted() {
    this.initGantt();
  },
  methods: {
    async initGantt() {
      const { result } = await ganttData;
      this.task.data = this.flatData(result);
      gantt.config.scales = [
        { unit: "year", step: 1, format: "%Y年" },
        { unit: "month", step: 1, format: "%n月" },
      ];
      gantt.config.bar_height = 28;
      gantt.config.row_height = 112;
      gantt.config.show_task_cells = true;
      gantt.config.fit_tasks = true;
      gantt.config.min_column_width = 100;
      gantt.config.auto_types = true;
      gantt.config.start_on_monday = true;
      gantt.config.scale_height = 66;
      gantt.config.autoscroll = true;
      gantt.config.readonly = true;
      gantt.config.show_grid = true;
      gantt.config.root_id = "root";
      gantt.config.show_errors = false;
      gantt.config.columns = [
        {
          tree: true,
          name: "memberNum",
          label: `<div style="width:100%">
                    <div style="padding:0 9px;line-height:38px;display:flex;align-items: center;">
                        <span style="width:calc(279px /3); color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zuyuan.png")}" alt="">组员</span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zuzhang.png")}" alt="">组长</span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zushen.png")}" alt="">组审</span>
                    </div>
                </div>`,
          align: "center",
          width: 280,
          template: function (task) {
            if (task.projectNum) {
              return `<div class="menber-number">
                <div style="padding:0 9px;line-height:38px;display:flex;align-items: center;justify-content:space-between">
                    <span>${task.userName}</span>
                    <span>参与项目个数:${task.projectNum}</span>
                </div>
                <div style="padding:0 9px;line-height:38px;display:flex;align-items: center;">
                        <span style="width:calc(279px /3); color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zuyuan.png")}" alt="">组员</span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zuzhang.png")}" alt="">组长</span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;"><img src="${require("@/assets/ab/gantt_zushen.png")}" alt="">组审</span>
                </div>
                 <div style="padding:0 9px;line-height:30px;display:flex;align-items: center;">
                        <span style="width:calc(279px /3); color:#323233;display:flex;align-items: center;justify-content: center;">
                           <span style="font-weight:700;font-size:19px;">${
                             task.memberNum
                           }</span>
                           次</span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;">
                          <span style="font-weight:700;font-size:19px;">${
                            task.groupNum
                          }</span>次
                          </span>
                        <span style="width:calc(279px /3);color:#323233;display:flex;align-items: center;justify-content: center;">
                          <span style="font-weight:700;font-size:19px;">${
                            task.chiefNum
                          }</span>次
                        </span>
                </div>
              </div>`;
            } else {
              return `<div style="margin-left:-30px">
                <div style="padding:0 9px;line-height:25px;display:flex;align-items: center;justify-content:space-between">
                    <span>${
                      task.projectName.length > 10
                        ? task.projectName.slice(0, 10) + "..."
                        : task.projectName
                    }</span>
                </div>
                  <div style="padding:0 9px;line-height:25px;display:flex;align-items: center;justify-content:space-between">
                    <span>${task.userName}</span>
                    <span>${task.roleNames}</span>
                </div>
                 </div>
                  <div style="padding:0 9px;line-height:25px;margin-left:-30px">
                    <div>计划开始时间：${task.planStartTime}</div>
                    <div>计划结束时间：${task.planEndTime}</div>
                </div>
                </div>`;
            }
          },
        },
      ];
      gantt.i18n.setLocale("cn");
      //时间线
      gantt.plugins({
        marker: true,
      });
      var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
      var today = new Date();
      gantt.addMarker({
        start_date: today,
        css: "today",
        text: "今天",
        title: "今天: " + date_to_str(today),
      });
      //更改父项图标
      gantt.templates.grid_folder = (item) => {
        return "";
      };

      const _this = this;
      gantt.templates.task_text = function (start, end, task) {
        console.log(task);
        const template =
          task.projectList &&
          task.projectList.map((v) => {
            return `<span>${v.projectName}</span>`;
          });
        return `<div>${_this.roleSolve(task)}</div> ${
          template || task.projectName
        }`;
      };

      gantt.init(this.$refs.gantt);
      gantt.parse(this.task); //填充数据
    },
    roleSolve(task) {
      const img1 = `<img src="${require("@/assets/ab/gantt_zuzhang.png")}" alt="" />`;
      const img2 = `<img src="${require("@/assets/ab/gantt_zushen.png")}" alt="" />`;
      const img3 = `<img src="${require("@/assets/ab/gantt_zuyuan.png")}" alt="" />`;
      if (task.roleCodes && task.roleCodes.length > 0) {
        if (task.roleCodes.includes("10")) {
          if (task.roleCodes.includes("20")) {
            if (task.roleCodes.includes("30")) {
              return img1.concat(img2, img3);
            }
            return img1.concat(img2);
          } else if (task.roleCodes.includes("30")) {
            return img1.concat(img3);
          }
          return img1;
        } else if (task.roleCodes.includes("20")) {
          if (task.roleCodes.includes("30")) {
            return img2.concat(img3);
          }
          return img2;
        } else if (task.roleCodes.includes("30")) {
          return img3;
        }
      } else {
        return "";
      }
    },
    flatData(arr) {
      const newArr = [];
      const oldArr = arr
        .filter((v) => v.projectList.length)
        .map((v, i) => {
          v.types = 1;
          v.parent = "root";
          v.tsakrank = 0;
          v.id = v.userId;
          v.taskname = v.userName;
          if (i % 2 == 0) {
            v.color = "#4477FE";
          } else {
            v.color = "#67C23A";
          }
          v.projectList.map((e, index) => {
            if (index % 2 == 0) {
              e.color = "#4477FE";
            } else {
              e.color = "#67C23A";
            }
            newArr.push({
              id: Math.random() + 989898,
              taskname: e.userName,
              parent: v.id,
              start_date: new Date(
                Date.parse(e.planStartTime.replace(/-/g, "/"))
              ),
              end_date: new Date(
                Date.parse(e.planEndTime.replace(/-/g, "/")) + 86399000
              ),
              text: e.projectName,
              types: 2,
              color: e.color,
              ...e,
            });
          });

          v.text = "";
          return v;
        });
      return oldArr.concat(newArr);
    },
    radioChange() {
      if (this.radio === "day")
        gantt.config.scales = [
          {
            unit: "month",
            step: 1,
            format: "%Y年" + "%n月",
          },
          { unit: "day", step: 1, format: "%j" },
          { unit: "day", step: 1, format: "%D" },
        ];
      if (this.radio === "week")
        gantt.config.scales = [
          {
            unit: "year",
            step: 1,
            format: "%Y年",
          },
          {
            unit: "month",
            step: 1,
            format: "%n月",
          },
          {
            unit: "week",
            step: 1,
            format: function (date) {
              return gantt.date.getWeek(date) + "周";
            },
          },
        ];
      if (this.radio === "month")
        gantt.config.scales = [
          {
            unit: "year",
            step: 1,
            format: "%Y年",
          },
          {
            unit: "month",
            step: 1,
            format: "%n月",
          },
        ];
      gantt.init(this.$refs.gantt);
    },
  },
};
</script>

<style lang="scss" scoped>
*,
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.gantt-wrapper {
  height: 80vh;
  width: 80vw;
  position: relative;
  margin: auto;
  .selectTimes {
    position: absolute;
    z-index: 10;
    left: 50px;
    top: 31px;
    ::v-deep .el-radio-button__inner {
      background-color: #f7f7f7;
      width: 60px;
    }
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #4477fe;
    }
  }
}
.gantt-container {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
</style>
<style>
.gantt_layout_cell ::-webkit-scrollbar {
  /* display: none; */
}
.menber-number {
  position: relative;
  /* display: flex; */
  /* align-items: start; */
  /* justify-content: start; */
}
.menber-number__user {
  span {
    position: absolute;
    top: -40px;
    color: #454545;
    font-size: 14px;
    &:nth-child(2) {
      right: 0;
    }
  }
}
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
  background-color: #fff;
}
.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover {
  background-color: #fff;
}
.gantt_task_row.gantt_selected .gantt_task_cell {
  border-right: 1px solid #ebebeb;
}
.gantt_layout_cell_border_right {
  box-shadow: 6px 0px 5px 0px rgba(0, 0, 0, 0.12);
  z-index: 9;
}

.gantt_tree_icon.gantt_blank,
.gantt_tree_indent,
.gantt_tree_icon.gantt_file {
  display: none;
}
.gantt_tree_icon.gantt_open,
.gantt_tree_icon.gantt_close {
  position: absolute;
  top: -38px;
  left: -2px;
  z-index: 11;
}
.gantt_task_content {
  display: flex;
  align-items: center;
  justify-content: start;
  border: none;

  div {
    height: 48px;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-right: 5px;
  }
  img {
    background-color: #fff;
    object-fit: cover;
    padding: 2px;
  }
}
.gantt_task_line {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: -3px 3px 3px 0px rgba(0, 36, 211, 0.3);
}
.gantt_task_line.gantt_task_inline_color.gantt_project.gantt_selected,
.gantt_task_line.gantt_task_inline_color.gantt_selected {
  box-shadow: -3px 3px 3px 0px rgba(0, 36, 211, 0.3);
}
.gantt_task_line.gantt_task_inline_color {
  border: none;
}
</style>
